<template>
  <div style="height:100%">
      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom">
            <el-amap-marker vid="component-marker" 
                :position="componentMarker.position" 
                :icon = "componentMarker.icon"
            >
            </el-amap-marker>
      </el-amap>
    </div>
</template>
<script>
import Vue from 'vue'
//引入高德地图
import VueAMap  from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'eb2f92acb5fcc9470300dc97b3a79964',
  // 插件集合
//   plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 
//   'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
});
export default{
    data(){
        return {
            zoom: 0,
            center: [0, 0],
            componentMarker: {
                position: [114.39326, 30.48078],
            }
        }
    },
    methods: {
        initMap(){
            let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.zoom = userInfo.zoom
            this.center = [userInfo.lng,userInfo.lat]
        }
    },
    mounted(){
        this.initMap()
    }
}
</script>
<style scoped>

</style>
